<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>图书管理系统</title>

  <style>
      .demo-carousel {
          height: 200px;
          line-height: 200px;
          text-align: center;
      }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <jsp:include page="/web/WEB-INF/common/header.jsp" flush="true"/>

  <div style="padding: 20px;"></div>
  <!-- 搜索条件表单 -->
  <div class="demoTable layui-form">
    <div class="layui-inline">
      <input class="layui-input" name="bookName" id="bookName" autocomplete="off" placeholder="请输入书名">
    </div>
    <div class="layui-inline">
      <input class="layui-input" name="author" id="author" autocomplete="off" placeholder="请输入作者">
    </div>
    <div class="layui-inline">
      <div class="layui-input-block">
        <select name="cid" id="cid">
          <option value="">请选择书本类别</option>
          <c:forEach items="${category}" var="ctg">
            <option value="${ctg.cid}">${ctg.cname}</option>
          </c:forEach>
        </select>
      </div>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
  </div>
</div>


<table class="layui-hide" id="demo" lay-filter="tableLend"></table>

<div class="layui-tab-item layui-show">
  <div id="pageDemo"></div>
</div>
<script type="text/html" id="barDemo">
  <%-- 必须使用 button--%>
  <button class="layui-btn layui-btn-normal layui-btn-sm backBook" lay-event="lend">借阅</button>


<%--  {{#  if(d.state =="1"){ }}--%>
<%--  	<button class="layui-btn layui-btn-sm lend layui-btn-disabled" lay-event="lend" disabled="disabled">已借阅</button>--%>
<%--  {{#  } }}--%>
</script>


</body>


<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">
	layui.use(['element', 'jquery', 'table', 'layer', 'form'], function () {
		let element = layui.element;
		let layer = layui.layer;
		let table = layui.table;
		let $ = layui.jquery;
		let form = layui.form;

		// 初始化导航栏
		element.init();

		// 执行一个table实例
		table.render({
			elem: '#demo',
			url: '${pageContext.request.contextPath}/book/bookPage',
			title: '图书表',
			height: 550,
			page: true,
			limit: 5,
			limits: [5, 10, 15, 20],
			cols: [
				[
					{type: 'checkbox', fixed: 'left'}
					, {field: 'bookId', title: '书本编号', width: 100, sort: true}
					, {field: 'name', title: '书名', width: 200}
					, {field: 'author', title: '作者', width: 200, sort: true}
					, {field: 'publish', title: '出版社', width: 200, sort: true}
					, {field: 'ISBN', title: 'ISBN', width: 150, sort: true}
					, {field: 'pubDate', title: '出版日期', width: 120, sort: true}
					, {field: 'stock', title: '库存', width: 100}
					, {field: 'price', title: '价格（￥）', width: 150, sort: true}
					, {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#barDemo'}
				]
			],
			id: 'testReload'
		})


		let active = {
			reload: function () {
				let bookName = $('#bookName');
				let author = $('#author');
				let cid = $('#cid');
				table.reload('testReload', {
					method: 'POST',
					page: {
						curr: 1
					},
					where: {
						bookName: bookName.val(),
						author: author.val(),
						cid: cid.val()
					}
				})
			}
		}

		// 监听条件搜索
		$('.demoTable .layui-btn').on('click', function () {
			let type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		})

		// 借阅书籍
		table.on('tool(tableLend)', function (obj) {
			// 行数据
			let data = obj.data;
			// 行事件
			let event = obj.event;
			// 事件处理
			if (event === 'lend') {
				layer.confirm("确认借阅此书吗？", function (index) {
					$.ajax({
						url: '${pageContext.request.contextPath}/lend/lendBook',
						data: {bookId: data.bookId, stock: data.stock},
						dataType: 'json',
						traditional: true,
						method: 'POST',
						success: function (res) {
							// 确认成功事件
							if (res.status === '0') {
								// 当前行
								let currentCol = $("tr").index(obj.tr) - 1;
								let dom = $('.backBook').eq(currentCol);

								if (dom.hasClass('layui-btn-normal')) {
									dom.removeAttr('layui-btn-normal');
									dom.addClass('layui-btn-disabled');
									dom.attr('lay-event', '');
									dom.attr('disabled', 'disabled');
									dom.html('已借阅');
								}
								layer.close(index);
							} else {
								layer.msg(res.message);
							}
						}
					})
				})
			}
		})

	})

</script>
</html>